import Access from '@/components/Access';
import type { ProColumns } from '@/components/Pro';
import { ProTable } from '@/components/Pro';
import { monitorServerControllerStationPage } from '@/services/ess/alertConfig';
import { Space } from 'antd';
import React from 'react';
import { Link, useIntl } from 'umi';
import Styles from '../index.less';

const UpgradeManagement: React.FC = () => {
  // const { initialState } = useModel('@@initialState');
  const intl = useIntl();
  const isEnglish = intl.locale === 'en-US';

  const tableColumns: ProColumns[] = [
    {
      title: intl.formatMessage({ id: 'maintenance.stieNo' }),
      dataIndex: 'NO',
      key: 'NO',
      valueType: 'index',
      width: 60,
    },
    {
      title: intl.formatMessage({ id: 'maintenance.siteName' }),
      dataIndex: 'stationName',
      key: 'stationName',
      search: {
        transform: (value) => {
          return {
            stationName: value,
          };
        },
      },
    },
    {
      title: intl.formatMessage({ id: 'maintenance.stationEmsVersion' }),
      dataIndex: 'stationEmsVersion',
      key: 'stationEmsVersion',
      hideInSearch: true,
    },
    {
      title: intl.formatMessage({ id: 'maintenance.updateTime' }),
      dataIndex: 'configUpdateTime',
      key: 'configUpdateTime',
      valueType: 'dateTimeRange',
      colSize: 1.2,
      render: (_, record) => record.configUpdateTime,
      search: {
        transform: (value) => {
          return {
            configStartTime: value?.[0],
            configEndTime: value?.[1],
          };
        },
      },
    },
    {
      title: intl.formatMessage({ id: 'maintenance.operation' }),
      key: 'operation',
      hideInSearch: true,
      render: (_, record) => (
        <>
          <Space>
            <Access perm={'remote:maintenance'} key="detail">
              <Link
                to={`/remoteUpgrade/remoteMaintenance/detail?stationid=${record?.id}`}
                key="detail"
              >
                {intl.formatMessage({ id: 'maintenance.details' })}
              </Link>
            </Access>
          </Space>
        </>
      ),
    },
  ];

  return (
    <>
      <ProTable
        rowKey={'id'}
        headerTitle={
          <div className={`${isEnglish ? Styles.table_header_title : ''}`}>
            {intl.formatMessage({
              id: 'maintenance.serverStatus',
            })}
          </div>
        }
        columns={tableColumns}
        request={async (params) => {
          const { current, pageSize, stationName, configStartTime, configEndTime } = params;
          const response = await monitorServerControllerStationPage({
            current: current ?? 1,
            pageSize: pageSize ?? 10,
            stationName,
            configStartTime,
            configEndTime,
          });
          return {
            data: response.data?.records ?? [],
            success: response.success,
            total: response.data?.total ?? 0,
          };
        }}
        pagination={{
          showSizeChanger: true,
        }}
      ></ProTable>
    </>
  );
};

export default UpgradeManagement;
